<template>
    <ul class="list" >
        <li class="item" :ref="item" v-for="item in letters" :key="item"  @click="handleLetterClick" @touchstart="handletouchstart" @touchmove="handletouchmove" @touchend="touchend">
            {{item  }}
       
        
        
        </li>
    </ul>
</template>

<script>
 export default {
    props:{
       cities:Object,
   },
   data () {
  
     return {
         touchStatus:false,
     }
   },
   components: {
   },
   computed : {
       letters () {
        const letters = []
            for (const i in this.cities ) {
                letters.push(i)
            }
            return letters  
       }

   },
   methods :{
       handleLetterClick (e) {
           this.$emit('change',e.target.innerText)
       },
       handletouchstart(){
           this.touchStatus=true
       },
        handletouchmove(e){
            if(this.touchStatus){
                const startY = this.$refs['A'][0].offsetTop
                const touchY = e.touches[0].clientY -62
                const index =Math.floor( (touchY - startY)  /    22)
                if(index>=0  &&  index<this.letters.length){
                    this.$emit("change",this.letters[index])
                }
                // console.log(index)
            }
       },
        touchend(){
          this.touchStatus=false
       }
   }
 }
</script>

<style lang="stylus" scoped> 
  .list{
      position absolute
      right 0
      bottom 0
      display flex
      flex-direction column
      justify-content center
      top 60px
      width 22px
  }
  .item{
      list-style none
      text-align center
      color #95aac0

  }
    
</style>
